<template>
  <el-dialog
    class="upload"
    :visible.sync="dialogVisible"
    width="700px"
    :modal-append-to-body="false"
  >
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane name="first" label="素材库">
          <el-radio-group @change="toggle" v-model="radio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="收藏"></el-radio-button>
          </el-radio-group>
          <div class="item" v-if="radio === '全部'">
            <img
              @click="imageUrl = item.url"
              :src="item.url"
              alt=""
              v-for="(item, index) in imgList.results"
              :key="index"
            />
          </div>
          <div class="item" v-else>
            <img
              @click="imageUrl = item.url"
              :src="item.url"
              alt=""
              v-for="(item, index) in imgList.results"
              :key="index"
            />
          </div>
          <el-pagination
            v-if="pagination.total > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="pagination.pageSize"
            layout="prev, pager, next"
            background
            :total="pagination.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane class="up" name="second" label="上传图片">
          <el-upload
            class="avatar-uploader"
            name="image"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="son">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getImages } from '@/api/sendArticle.js'
import { getUser } from '@/utils/storage.js'
// import { mapState } from 'vuex'
export default {
  porps: {
    dialogVisible: {
      type: Boolean
    }
  },
  data () {
    return {
      dialogVisible: false,
      activeName: 'first',
      radio: '全部',
      imgList: '',
      collect: false,
      // 每页的数量
      per_page: '',
      page: '',
      // 页数
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 100
      },
      // 上传图片的地址
      imageUrl: '',
      headers: { Authorization: `Bearer ${getUser().token}` }
    }
  },
  created () {
    this.toggle()
  },
  // computed: {
  //   ...mapState(['userInfo'])
  // },
  methods: {
    // 切换全部与收藏事件
    async toggle (val) {
      // window.console.log(val)
      if (val === '收藏') {
        this.collect = true
        // 每次切换回到首页
        this.pagination.currentPage = 1
      } else {
        this.collect = false
      }
      const res = await getImages({
        collect: this.collect,
        per_page: this.pagination.pageSize,
        page: this.pagination.currentPage
      })
      window.console.log('imagse', res)
      this.imgList = res.data
      this.pagination.total = this.imgList.total_count
      // window.console.log(this.pagination.total)
    },
    // async getPage () {
    //   const res = await getImages({
    //     collect: this.collect,
    //     per_page: this.pagination.pageSize,
    //     page: this.pagination.currentPage
    //   })
    //   window.console.log('imagse', res)
    //   this.imagesUrl = res.data.data
    //   this.pagination.total = this.imagesUrl.total_count
    //   window.console.log(this.pagination.total)
    // },

    // 切换最外层的tabs栏
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 页码每页有多少图片
    handleSizeChange (size) {
      console.log(`每页 ${size} 条`)
      this.pagination.pageSize = size
      this.toggle()
    },
    // 当前在多少页
    handleCurrentChange (page) {
      console.log(`当前页: ${page}`)
      this.pagination.currentPage = page
      this.toggle()
    },
    handleAvatarSuccess (res, file) {
      window.console.log('img', res)
      window.console.log(file)
      this.imageUrl = res.data.url
      window.console.log('imageUrl', this.imageUrl)
      // 传递url
      this.$emit('father', this.imageUrl)
      this.$message.success('上传图片成功')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 子组件传到父组件
    son () {
      this.dialogVisible = false
      // this.$emit('father', this.imageUrl)
    }
    // 选择全部和收藏的图片
    // selectImg () {
    //   //
    //   // this.imgList.results.
    // }
  }
}
</script>
<style lang="less">
.upload {
  .tabs {
    width: 100%;
    img {
      width: 100px;
      height: 100px;
    }
    .item {
      height: 220px;
    }
  }
  .up {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  }
}
</style>
